<template>
  <div class="matrix-details">
    <el-container class="md-container">
      <el-main class="md-main">
        <el-page-header @back="$router.back()">
          <el-row slot="content" type="flex" justify="space-between" align="middle">
            <span>{{ matrix.name }}</span>
            <span>
              <MatrixStarButton :matrix-id="matrix.id" class="mr-2" />
              <MatrixShareButton :matrix-id="matrix.id">分享</MatrixShareButton>
            </span>
          </el-row>
        </el-page-header>
        <el-divider class="my-4" />
        <el-tabs v-model="activeTab">
          <el-tab-pane label="图表" name="chart">
            <MatrixChart :matrix="matrix" :origin="origin" />
          </el-tab-pane>
          <el-tab-pane label="探源信息" name="source">
            <MatrixOrigin :matrix="matrix" @change="onOriginChange" />
          </el-tab-pane>
          <el-tab-pane label="指标定义" name="definition">
            <MatrixDefinition :matrix="matrix" />
          </el-tab-pane>
        </el-tabs>
      </el-main>
      <el-aside width="400px" class="md-side">
        <MatrixSide :matrix="matrix" />
      </el-aside>
    </el-container>
  </div>
</template>
<script>
import request from '@/utils/request'
import MatrixChart from './components/chart'
import MatrixOrigin from './components/origin'
import MatrixDefinition from './components/definition'
import MatrixSide from './components/view-side'
import MatrixStarButton from './components/star-button'
import MatrixShareButton from './components/share-button'

export default {
  components: { MatrixChart, MatrixOrigin, MatrixDefinition, MatrixSide, MatrixShareButton, MatrixStarButton },
  data() {
    return {
      activeTab: 'chart',
      star: false,
      starRequesting: false,
      matrix: {},
      origin: {},
    }
  },
  created() {
    this.loadMatrix()
  },
  methods: {
    onOriginChange(payload) {
      this.origin = payload
    },
    async loadMatrix() {
      try {
        const { success, data } = await request({
          url: '/jtx/index/get',
          method: 'get',
          params: { id: this.$route.params.id },
        })
        if (success) {
          this.matrix = data
        } else {
          this.$message.error('加载失败，请稍后重试')
        }
      } catch (error) {
        console.log('error=', error)
        this.$message.error('加载失败，请稍后重试')
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.matrix-details {
  height: 100%;
  width: 100%;
  padding: 0;

  .md-container {
    height: 100%;

    .md-main {
      height: 100%;
      border-radius: 8px;
      padding: 20px 0;
      background-color: #fff;
      ::v-deep .el-page-header {
        padding: 0 20px;
        align-items: center;
        .el-page-header__content {
          flex: 1;
        }
      }

      ::v-deep .el-tabs {
        height: calc(100% - 69px);
        .el-tabs__header {
          padding: 0 20px;
        }
        .el-tabs__content {
          height: calc(100% - 55px);
          .el-tab-pane {
            height: 100%;
            padding: 0 20px;
            overflow-y: auto;
          }
        }
      }
    }

    .md-side {
      border-radius: 8px;
      margin-left: 20px;
      background-color: #fff;
    }
  }
}
</style>
